<template>
  <div class="product-details">
    <!-- 商品基本信息 -->
    <div class="sku-info">
      <img :src="skuInfo.skuDefaultImg" alt="商品图片" class="product-image" />
      <h2>{{ skuInfo.skuName }}</h2>
      <p class="sku-subtitle">副标题:{{ skuInfo.skuSubtitle }}</p>
      <p class="sku-title">标题:{{ skuInfo.skuTitle}}</p>
      <p class="price">价格: ¥{{ skuInfo.price }}</p>
    </div>




    <!-- 商品图片轮播 -->
    <div class="product-gallery">
      <h3>商品图集</h3>
      <div class="gallery-images">
        <img
          v-for="(image, index) in skuImagesList"
          :key="image.id"
          :src="image.imgUrl"
          :alt="'图集' + (index + 1)"
          class="gallery-image"
        />
      </div>
    </div>

    <!-- 商品描述 -->
    <div class="spu-desc">
      <h3>商品描述</h3>
      <div class="description-images">
        <img
          v-for="(descImg, index) in spuInfoDesc.decript ? spuInfoDesc.decript.split(',') : []"
          :key="index"
          :src="descImg"
          alt="'商品描述图' + (index + 1)"
          class="description-image"
        />
      </div>
    </div>



    <div>
       <h3>优惠券</h3>
      <el-button type="primary" @click="dialogTableVisible = true">可用优惠券</el-button>
      <el-dialog title="可用优惠" :visible.sync="dialogTableVisible">
        <el-table :data="skuAttrDiscountCouponVos">
            <el-table-column property="name" label="优惠券" width="150"></el-table-column>
            <el-table-column property="employDoorsill" label="使用门槛" width="200"></el-table-column>
            <el-table-column property="value"  label="value1" width="200"></el-table-column>
            <el-table-column property="value2" label="value2"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)">立即领取</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-dialog>

    </div>







<!--            &lt;!&ndash; 商品属性 &ndash;&gt;-->
<!--        <div class="product-attributes">-->
<!--          <h3>商品属性</h3>-->
<!--          <div v-for="(group, groupIndex) in attrGroupVos" :key="groupIndex" class="attribute-group">-->
<!--            <h4>{{ group.attrGroupName }}</h4>-->
<!--            <ul>-->
<!--              <li-->
<!--                v-for="(attr, attrIndex) in group.attrVoList"-->
<!--                :key="attrIndex"-->
<!--                class="attribute-item"-->
<!--              >-->
<!--                {{ attr.attrVoName }}: {{ attr.attrVoValue }}-->
<!--              </li>-->
<!--            </ul>-->
<!--          </div>-->
<!--        </div>-->



    <!--    数量-->

    <div>

      <template>
        <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
      </template>

    </div>







    <button @click="cartAdd()" type="primary">添加购物车</button>
    <el-button @click="cart" type="primary">我的购物车</el-button>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {getItem, SkuCouponAdd} from "@/api/product/item";
import {addCart} from "@/api/cart/cart";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        // 计数
        num: 1,
        // 从路由中获取 skuId 参数
        skuId: this.$route.query.skuId,
        // 初始化的数据结构
        skuInfo: {
          skuName: '',
          skuSubtitle: '',
          skuTitle: '',
          skuDefaultImg: '',
          price: 0,
          num: 0
        },
        spuInfoDesc: {
          decript: ''  // 默认为空字符串
        },
        attrGroupVos: [],
        attrVoList: [],
        skuImagesList: [],
        discountCouponVos:[],
        skuAttrDiscountCouponVos:[

        ],
        sku:{},
        dialogVisible:false,
        dialogTableVisible:false,
        title:'立即领取'
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      // 计数
      handleChange(value) {
        console.log(value);
      },
      /** 查询商品属性列表 */
      getList() {
        // 假设你通过某个 API 请求来获取商品数据
        getItem(this.skuId).then(response => {
          console.log(response); // 输出响应数据
          // 显示各个部分的数据
          console.log('显示商品的默认图片', response.data.skuInfo);
          console.log('商品描述部分', response.data.puInfoDesc);
          console.log('商品属性', response.data.attrGroupVos);
          console.log('如果有SKU图片，展示这些图片', response.data.skuImagesList);
          console.log("优惠券信息",response.data.skuAttrDiscountCouponVos)
          // 将获取到的数据赋值给组件的 data
          this.skuInfo = response.data.skuInfo;
          this.spuInfoDesc = response.data.spuInfoDesc;
          this.attrGroupVos = response.data.attrGroupVos;
          this.attrVoList = response.data.attrGroupVos.flatMap(group => group.attrVoList); // 展平属性列表
          this.skuImagesList = response.data.skuImagesList;
          this.skuAttrDiscountCouponVos=response.data.skuAttrDiscountCouponVos
          // 你可以进一步处理这些数据，视需求而定
          console.log('所有商品属性列表', this.attrVoList);
        })
      },

      handleEdit(row){
        console.log(row.discountCouponId)
        SkuCouponAdd(row.discountCouponId).then(res=>{
          this.$message.success("领取成功")
        })
      },
      cartAdd(){
        addCart(this.skuId,this.num).then(res=>{
          this.$message.success("购物车添加成功")
        })
      },
      cart(){
        this.$router.push({ path: '/cart' });
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      // 在组件创建时获取商品数据
      this.getList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>


<style scoped>
.product-details {
  width: 80%;
  margin: 0 auto;
}

.product-image {
  width: 100%;
  max-width: 300px;
}

.gallery-images,
.description-images {
  display: flex;
  flex-wrap: wrap;
}

.gallery-image,
.description-image {
  width: 30%;
  margin: 10px;
}

.attribute-group {
  margin-bottom: 20px;
}

.attribute-item {
  margin: 5px 0;
}
.aaa {
  width: 80%;
  height:150%
}
.name{
  width: 80%;
  height:80%
}
</style>
